﻿
@{
    ViewData["Title"] = "菜单管理";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section Head{
    <link href="~/layuiadmin/style/style.css" rel="stylesheet" />
    <style>
        .layui-table-cell {
            padding: 0 5px;
            height: auto;
            overflow: visible;
            text-overflow: inherit;
            white-space: normal;
            word-break: break-all;
        }

            .layui-table-cell span {
                font-size: 13px;
                font-weight: bold;
            }

        .layui-btn-container {
            margin: 0 !important;
        }

        .text-success {
            color: #1c84c6;
        }

        a.text-success:focus,
        a.text-success:hover {
            color: #2b542c;
        }
    </style>
}

<div id="dMain" style="padding:10px;">
    <div class="wrapper-content">
        <div class="layui-card">
            @*<div class="layui-card-header">菜单管理</div>*@
            <div class="layui-card-body">
                <table id="tabData" lay-filter="demo"></table>
            </div>
        </div>
    </div>
</div>

<script>
    window.onload = function () {
        layui.use('table', function () {
            var table = layui.table;

            table.render({
                elem: '#tabData',
                toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
                page: true,
                limit: 30,
                limits: [30, 40, 50],
                loading: true,
                cols: [
                    [ //表头
                        {
                            title: '#',
                            type: 'radio'
                        }, {
                            field: 'MenuName',
                            title: '菜单名称',
                            width: 180,
                            align: "center"
                        }, {
                            field: 'PageUrl',
                            title: '链接地址',
                            width: 180,
                            sort: true
                        }, {
                            field: 'Bak2',
                            title: '类别 ',
                            width: 80,
                            sort: true,
                            align: "center"
                        }, {
                            field: 'quanxian',
                            title: '访问权限'
                        }, {
                            field: 'Flag1',
                            title: '索引',
                            width: 80,
                            sort: true,
                            align: "center"
                        }, {
                            field: 'caozuo',
                            title: '操作',
                            width: 80,
                            align: "center",
                            templet: barDemo
                        }
                    ]
                ],
                data: [{
                    "MenuName": "文书档案",
                    "PageUrl": "/Instruments.aspx",
                    "Bak2": "档案",
                    "quanxian": "系统管理员，处室内勤，档案管理员，处室领导，干警，院领导，检察官，档案管理员，档案管理员",
                    "Flag1": "10",
                },
                {
                    "MenuName": "文书档案",
                    "PageUrl": "/Instruments.aspx",
                    "Bak2": "档案",
                    "quanxian": "系统管理员，处室内勤，院领导，检察官，档案管理员",
                    "Flag1": "10",
                },
                {
                    "MenuName": "文书档案",
                    "PageUrl": "/Instruments.aspx",
                    "Bak2": "档案",
                    "quanxian": "处室领导，干警，院领导，检察官，档案管理员，档案管理员",
                    "Flag1": "10",
                },
                {
                    "MenuName": "文书档案",
                    "PageUrl": "/Instruments.aspx",
                    "Bak2": "档案",
                    "quanxian": "系统管理员",
                    "Flag1": "10",
                },
                {
                    "MenuName": "文书档案",
                    "PageUrl": "/Instruments.aspx",
                    "Bak2": "档案",
                    "quanxian": "干警，院领导，检察官，档案管理员，档案管理员",
                    "Flag1": "10",
                },
                {
                    "MenuName": "文书档案",
                    "PageUrl": "/Instruments.aspx",
                    "Bak2": "档案",
                    "quanxian": "系统管理员，处室内勤，档案管理员，处室领导，干警，档案管理员",
                    "Flag1": "10",
                },
                {
                    "MenuName": "文书档案",
                    "PageUrl": "/Instruments.aspx",
                    "Bak2": "档案",
                    "quanxian": "系统管理员，处室内勤，档案管理员，处室领导，干警",
                    "Flag1": "10",
                },
                {
                    "MenuName": "文书档案",
                    "PageUrl": "/Instruments.aspx",
                    "Bak2": "档案",
                    "quanxian": "系统管理员，处室内勤，档案管理员，处室领导，干警",
                    "Flag1": "10",
                },
                {
                    "MenuName": "文书档案",
                    "PageUrl": "/Instruments.aspx",
                    "Bak2": "档案",
                    "quanxian": "系统管理员，处室内勤，档案管理员，处室领导，干警",
                    "Flag1": "10",
                },
                {
                    "MenuName": "文书档案",
                    "PageUrl": "/Instruments.aspx",
                    "Bak2": "档案",
                    "quanxian": "系统管理员，处室内勤，档案管理员，处室领导，干警",
                    "Flag1": "10",
                },
                {
                    "MenuName": "文书档案",
                    "PageUrl": "/Instruments.aspx",
                    "Bak2": "档案",
                    "quanxian": "系统管理员，处室内勤，档案管理员，处室领导，干警",
                    "Flag1": "10",
                },
                {
                    "MenuName": "文书档案",
                    "PageUrl": "/Instruments.aspx",
                    "Bak2": "档案",
                    "quanxian": "系统管理员，处室内勤，档案管理员，处室领导，干警",
                    "Flag1": "10",
                },
                {
                    "MenuName": "文书档案",
                    "PageUrl": "/Instruments.aspx",
                    "Bak2": "档案",
                    "quanxian": "系统管理员，处室内勤，档案管理员，处室领导，干警",
                    "Flag1": "10",
                },
                {
                    "MenuName": "文书档案",
                    "PageUrl": "/Instruments.aspx",
                    "Bak2": "档案",
                    "quanxian": "系统管理员，处室内勤，档案管理员，处室领导，干警",
                    "Flag1": "10",
                },
                {
                    "MenuName": "文书档案",
                    "PageUrl": "/Instruments.aspx",
                    "Bak2": "档案",
                    "quanxian": "系统管理员，处室内勤，档案管理员，处室领导，干警",
                    "Flag1": "10",
                },
                {
                    "MenuName": "文书档案",
                    "PageUrl": "/Instruments.aspx",
                    "Bak2": "档案",
                    "quanxian": "系统管理员，处室内勤，档案管理员，处室领导，干警",
                    "Flag1": "10",
                },
                {
                    "MenuName": "文书档案",
                    "PageUrl": "/Instruments.aspx",
                    "Bak2": "档案",
                    "quanxian": "系统管理员，处室内勤，档案管理员，处室领导，干警",
                    "Flag1": "10",
                }
                ]
            });
        });

        layui.use('table', function () {
            var table = layui.table;
            //监听工具条
            table.on('tool(demo)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.msg('ID：' + data.id + ' 的查看操作');
                } else if (obj.event === 'del') {
                    layer.confirm('确定删除此行数据？', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    layer.alert('编辑' + JSON.stringify(data))
                }
            });
        });

    }
</script>

<script type="text/html" id="toolbarDemo">
    <div class="MenuManager-title"></div>
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="">添加菜单</button>
    </div>
    <div class="layui-inline layui-inline-secate">
        <input class="layui-input" name="id" id="test-table-demoReload" autocomplete="off" placeholder="搜索" data-type="reload">
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="text-success" lay-event="edit">编辑</a> &nbsp;
    <a class="text-danger" lay-event="del">删除</a>
</script>

<script src="~/layuiadmin/layui/jquery.min.js"></script>
<script>
    $(document).on("click", ".layui-table-body table.layui-table tbody tr", function () {
        /*当单击表格行时,把单选按钮设为选中状态*/
        var tableDiv;
        var index = $(this).attr('data-index');
        var tableBox = $(this).parents('.layui-table-box');
        //存在固定列
        if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length > 0) {
            tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
        } else {
            tableDiv = tableBox.find(".layui-table-body.layui-table-main");
        }
        var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.layui-table-cell div.layui-form-radio I");
        if (checkCell.length > 0) {
            checkCell.click();
        }
    });
    //对td的单击事件进行拦截停止，防止事件冒泡再次触发上述的单击事件  将此代码在页面初始化后执行一次即可以。
    $(document).on("click", "td div.layui-table-cell div.layui-form-radio", function (e) {
        e.stopPropagation();
    });
</script>